<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .wrap {
            width: 1140px;
            margin: 0 auto;
        }

        .wrap .searchBar {
            /* margin-bottom: 20px; */
            display: flex;
            height: 40px;
        }

        .wrap .searchCon {
            flex: 1;
            outline: none;
            text-indent: 10px;
        }

        .wrap .searchBtn {
            width: 60px;
            background-color: grey;
            text-align: center;
            line-height: 40px;
            border-radius: 4px;
        }

        .tipsList li {
            line-height: 35px;
            text-indent: 10px;
            border: 1px dashed #333;
        }

        .tipsList li+li {
            border-top: 0;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <div class="searchBar">
            <input type="text" class="searchCon">
            <a href="javascript:;" class="searchBtn">搜索</a>
        </div>
        <ul class="tipsList">
            <!-- <li><a href="">01</a></li>
            <li><a href="">02</a></li>
            <li><a href="">03</a></li>
            <li><a href="">04</a></li> -->
        </ul>


    </div>
</body>
<script>
    var ul = document.querySelector(".tipsList");
    var searchCon = document.querySelector(".searchCon");
    var searchBtn = document.querySelector(".searchBtn");

    // https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=33798,33818,33745,33272,31660,33756,33392,33713,26350,33794&wd=h55&req=2&csor=3&pwd=h&cb=jQuery11020013411224280350797_1617181940471&_=1617181940475

    // https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=haha&_=1617181940475

    // prod=pc  pc端
    // wd   搜索的关键词
    // cb   回调函数名

    var script = null;   //全局变量记录script

    searchCon.oninput = function () {
        var key = this.value.trim();
        console.log(key);

        if (script) { // 有script  就删除 
            script.remove();
        }

        script = document.createElement("script");
        script.src = `https://www.baidu.com/sugrec?prod=pc&wd=${key}&cb=fn&_=1617181940475`;
        // 每次重新创建script 放到页面中是 会发送请求得到数据
        document.head.appendChild(script);

    }

    function fn(data) {
        console.log(data);
        var { g: list } = data;
        if (list) {  //有数据 动态生成
            var html = "";
            list.forEach(({ q }) => {
                html += `<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=${q}">${q}</a></li>`
            })
            ul.innerHTML = html;
        } else {  //没有数据就清空
            ul.innerHTML = "";
        }

    }






</script>
<!-- 返回函数的调用 -->
<!-- 页面加载时搜索 -->
<!-- <script src="https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn&_=1617181940475"></script> -->

</html>